<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script>
      (function () {
        //  原型 prototype  原型链 __proto__
        //  每个类（函数）都具备prototype，并且prototype是一个对象
        //  对象(实例)上自带属性：constructor，并指向类的本身
        //  每个对象（普通函数，prototype，实例，函数、原型）都具备__proto__属性，且是当前实例所属类的原型
        //  new fun()与new fun 都是创建实例，区别第一个能传参 （普通函数执行需要fun()，但new函数不需要）
        //  如果是对象(prototype)不是被new出来的，统一指向Object内置类（函数，也是个对象） ，而函数都有prototype，prototype又有__proto__且底层为null（Object.prototyoe.__proto__   为null）
        /*
        原型链（proto）：先找自己私有的，没有基于proto找所属实例prototype上共有属性，如果再没有找到继续往上找，一直找到Object.prototyoe为止，因为Object.prototyoe的原型链proto是null
       new + 函数 === 实例
       实例.constructor===函数
       实例.__proto__===fn.prototype
       实例.__proto__.__proto__====Object.prototype
      */
        function fn() {}
        fn.prototype.get = function () {
          console.log(x);
        };
        let fn1 = new fn();
        console.log(fn1.constructor === fn); //true
        console.log(fn1.__proto__ === fn.prototype); //true
        console.log(fn1.__proto__.__proto__ === Object.prototype); //true
      })();
    </script>
    <script>
      (function () {
        //题目
        function fn() {
          this.x = 100;
          this.y = 200;
          this.getX = function () {
            console.log(this);
          };
        }
        fn.prototype.getX = function () {
          console.log(this.x);
        };
        fn.prototype.getY = function () {
          console.log(this.y);
        };
        let f1 = new fn();
        let f2 = new fn();
        console.log(f1.getX === f2.getX); //false
        console.log(f1.getY === f2.getY); //true
        console.log(f1.__proto__.getY === fn.prototype.getY); //true
        console.log(f1.__proto__.getX === f2.getX); //false
        console.log(f1.getX === fn.prototype.getX); //false
        console.log(f1.constructor === fn); //true
      })();
    </script>
  </body>
</html>
